﻿@{
    Layout = "~/Views/Shared/Main.cshtml";
}

@section  PageStyleFile{
	<link rel="stylesheet" type="text/css" href="~/assets/global/plugins/fullcalendar/fullcalendar.min.css"/>
	<link rel="stylesheet" type="text/css" href="~/assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
	<link rel="stylesheet" type="text/css" href="~/assets/global/plugins/bootstrap-colorpicker/css/colorpicker.css"/>
	<link rel="stylesheet" type="text/css" href="~/assets/admin/pages/css/calendar.css"/>
}

@section PageScriptFile{
	<script type="text/javascript" src="~/assets/global/plugins/moment.min.js"></script>
	<script type="text/javascript" src="~/assets/global/plugins/fullcalendar/fullcalendar.min.js"></script>
	<script type="text/javascript" src="~/assets/global/plugins/fullcalendar/lang/zh-cn.js"></script>
	<script type="text/javascript" src="~/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="~/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="~/assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
	<script type="text/javascript" src="~/assets/admin/pages/scripts/calendar.js"></script>
}

@section PageScript{
    <script type="text/javascript">
        jQuery(document).ready(function () {
            Calendar.init();
        });
    </script>
}

<div class="col-md-12">
	<div class="portlet box blue calendar">
		<div class="portlet-title">
			<div class="caption">
				<i class="fa fa-calendar"></i> 日程安排
			</div>
		</div>
		<div class="portlet-body">
			<div class="row">
				<div class="col-md-3 col-sm-12">
					<h3 class="event-form-title">
						添加事件
					</h3>
					<div id="external-events">
						<form class="inline-form" action="~/Calendar/AddEvent">
							<div class="row">
								<div class="col-md-12">
									<input id="txtEventTitle" type="text" value="" class="form-control" placeholder="事件标题..." id="event_title">
								</div>
							</div>
							<div class="row mt-10">
								<div class="col-md-12">
									<p>开始时间：</p>
									<div class="input-group date form_meridian_datetime">
										<input id="txtStartDate" type="text" class="form-control">
										<span class="input-group-btn">
											<button class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
											<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>
								</div>
							</div>
							<div class="row mt-10">
								<div class="col-md-12">
									<p>结束时间：</p>
									<div class="input-group date form_meridian_datetime">
										<input id="txtEndDate" type="text" class="form-control">
										<span class="input-group-btn">
											<button class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
											<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>
								</div>
							</div>
							<div class="row mt-10">
								<div class="col-md-6">
									<p>重复事件：</p>
									<div class="input-group">
										<select id="ddlRepeat" class="bs-select form-control" data-live-search="true" data-size="8">
											<option value="0">不重复</option>
											<option value="1">每天</option>
											<option value="2">每周</option>
											<option value="3">每月</option>
											<option value="4">每年</option>
										</select>
									</div>
								</div>
								<div class="col-md-6">
									<p>样例展示</p>
									<span id="styletmp" class="styletmp">事件样式样例</span>
								</div>
							</div>
							<div class="row mt-10">
								<div class="col-md-6">
									<p>文本颜色：</p>
									<div id="divForeground" class="input-group color colorpicker-default" data-color="#000000" data-color-format="rgba">
										<input id="txtForeground" type="text" class="form-control" value="#000000" maxlength="7">
										<span class="input-group-btn">
										<button class="btn default" type="button"><i style="background-color: #000000;"></i>&nbsp;</button>
										</span>
									</div>
								</div>
								<div class="col-md-6">
									<p>背景颜色：</p>
									<div id="divBackground" class="input-group color colorpicker-default" data-color="#cccccc" data-color-format="rgba">
										<input id="txtBackground" type="text" class="form-control" value="#cccccc" maxlength="7">
										<span class="input-group-btn">
										<button class="btn default" type="button"><i style="background-color: #cccccc;"></i>&nbsp;</button>
										</span>
									</div>
								</div>
							</div>
							<p class="mt-30">
								<a href="javascript:;" id="event_add" class="btn default"> 添加事件 </a> 
							</p>
						</form>
					</div>
				</div>
				<div class="col-md-9 col-sm-12">
					<div id="calendar" class="has-toolbar">
					</div>
				</div>
			</div>
		</div>
	</div>
</div><!--事件详情页-->
<div class="modal fade" id="event_panel" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 id="event_title" class="modal-title">事件标题</h4>
			</div>
			<div class="modal-body">
				<form id="appendToForm" trigger-id="btnAppendToGroup" action="~/user/AppendToGroup?ajax=true" method="POST">
					<div class="row">
						<div class="col-sm-5">
							<p>开始时间：</p>
							<div class="input-group date form_meridian_datetime">
								<input id="txtEventStartDate" type="text" class="form-control">
								<span class="input-group-btn">
									<button class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
									<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
								</span>
							</div>
						</div>
						<div class="col-sm-5">
							<p>结束时间：</p>
							<div class="input-group date form_meridian_datetime">
								<input id="txtEventEndDate" type="text" class="form-control">
								<span class="input-group-btn">
									<button class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
									<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
								</span>
							</div>
						</div>
						<div class="col-sm-2">
							<p>重复事件：</p>
							<div class="input-group">
								<select id="ddlEventRepeat" class="bs-select form-control" data-live-search="true">
									<option value="0">否</option>
									<option value="1">天</option>
									<option value="2">周</option>
									<option value="3">月</option>
									<option value="4">年</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row mt-10">
						<div class="col-sm-4">
							<p>文本颜色：</p>
							<div id="divEventForeground" class="input-group color colorpicker-event" data-color="#000000" data-color-format="rgba">
								<input id="txtEventForeground" type="text" class="form-control" value="#000000" maxlength="7">
								<span class="input-group-btn">
								<button class="btn default" type="button"><i style="background-color: #000000;"></i>&nbsp;</button>
								</span>
							</div>
						</div>
						<div class="col-sm-4">
							<p>背景颜色：</p>
							<div id="divEventBackground" class="input-group color colorpicker-event" data-color="#cccccc" data-color-format="rgba">
								<input id="txtEventBackground" type="text" class="form-control" value="#cccccc" maxlength="7">
								<span class="input-group-btn">
								<button class="btn default" type="button"><i style="background-color: #cccccc;"></i>&nbsp;</button>
								</span>
							</div>
						</div>
						<div class="col-sm-4">
							<p>样例展示</p>
							<span id="styleEventTmp" class="styletmp">事件样式样例</span>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button id="btnDelete" type="button" class="btn red">删除事件</button>
				<button id="btnChange" type="button" class="btn blue">修改事件</button>
				<button id="btnCancel" type="button" class="btn default" data-dismiss="modal">取消</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>